<script setup>
defineProps({
  title: {
    type: String,
    default: 'Welcome to our website'
  },
})
</script>

<template>
  <div class="middle-header">
    <h1 class="title">{{title}}</h1>
    <div class="center">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">

@use"@/styles/color-var-prim"as prim;

.middle-header {
  padding: 4rem;
  min-height: 30vh;
  background-color: prim.$color-primary-light;
  .title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    color: prim.$color-text-light;
  }
  .center {
    color: prim.$color-text-light;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>